<template>
    <div class='store-goods-components'>
        <div v-for="(item, i) in list_goods" :key="i" class="goods" @click="goto(item.goods_id)">
            <img :src="item.has_one_goods.thumb" alt="">
            <div class="right">
                <div class="title">{{ item.has_one_goods.title }}</div>
                <div class="date">{{ item.purchase.expire.type == 1 ? `有效期：购买后${item.purchase.expire.days}天内有效` :
                    `有效期：${item.purchase.expire.at}` }} | {{ item.purchase.booking_rule.need_booking == 2 ? '免预约' :
                        `提前${item.purchase.booking_rule.advance_num}${item.purchase.booking_rule.advance_unit == 1 ? '天' :
                            item.purchase.booking_rule.advance_unit == 2 ? '小时'
                                : '分钟'}`
                    }}</div>
                <div class="sale">已售{{ item.has_one_goods.virtual_sales + item.has_one_goods.show_sales }}</div>
                <slot>
                    <div class="footer">
                        <div>
                            <div class="price">
                                <div class="current-price">{{ $i18n.t("money") }}{{ item.has_one_goods.price }}</div>
                                <div class="original-price">{{ $i18n.t("money") }}{{ item.has_one_goods.market_price }}
                                </div>
                            </div>
                            <div class="seckill-info" v-if="item.sale_end_at">
                                <span class="seckill-info-txt">限时购</span>
                                <img :src="imgHost + '/static/local/tiktok-group-buy/miaoshabeijing.png'" alt="">
                                <van-count-down v-if="item.sale_start_at > now"
                                    :time="fun.getTimeDifference(item.sale_start_at)" format="DD 天 HH 时 mm 分 ss 秒">
                                    <template #default="timeData">
                                        <span class="date" v-if="timeData.days > 0">{{ timeData.days }}天</span>
                                        <span class="block">{{ timeData.hours < 10 ? '0' + timeData.hours :
                                            timeData.hours }}</span>
                                                <span class="colon">:</span>
                                                <span class="block">{{ timeData.minutes < 10 ? '0' + timeData.minutes :
                                                    timeData.minutes }}</span>
                                                        <span class="colon">:</span>
                                                        <span class="block">{{ timeData.seconds < 10 ? '0' +
                                                            timeData.seconds : timeData.seconds }}</span>
                                    </template>
                                </van-count-down>
                                <van-count-down v-else :time="fun.getTimeDifference(item.sale_end_at)"
                                    format="DD 天 HH 时 mm 分 ss 秒">
                                    <template #default="timeData">
                                        <span class="date" v-if="timeData.days > 0">{{ timeData.days }}天</span>
                                        <span class="block">{{ timeData.hours < 10 ? '0' + timeData.hours :
                                            timeData.hours }}</span>
                                                <span class="colon">:</span>
                                                <span class="block">{{ timeData.minutes < 10 ? '0' + timeData.minutes :
                                                    timeData.minutes }}</span>
                                                        <span class="colon">:</span>
                                                        <span class="block">{{ timeData.seconds < 10 ? '0' +
                                                            timeData.seconds : timeData.seconds }}</span>
                                    </template>
                                </van-count-down>
                            </div>

                        </div>
                        <div class="buy">抢购</div>
                    </div>
                </slot>

            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        list: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() {
        return {
            imgHost: window.location.origin,
            list_goods: [],
            now: 0,
        };
    },

    methods: {
        goto(goods_id) {
            this.$router.push(this.fun.getUrl("local_life_goods", { goods_id }))
        },
    },
    mounted() {

        this.now = Math.floor(Date.now() / 1000);// 获取不包含毫秒的当前时间戳
    },
    watch: {
        "list": function (newVal, oldVal) {
            console.log(newVal, 'newV===');
            if (newVal && newVal.length !== 0) {
                this.list_goods = newVal
            }
        }
    }
};
</script>

<style scoped lang='scss'>
::v-deep .van-count-down {
    font-weight: 500;
    font-size: 0.6875rem;
    color: #F15353 !important;
    flex: 1;
    padding-right: 0.2813rem;
    line-height: unset;
}

::v-deep .van-count-down .date {
    font-size: 0.6875rem !important;
    color: #F15353 !important;
}

.store-goods-components {

    .seckill-info {
        display: flex;
        min-width: 6.5625rem;
        width: max-content;
        height: 1.125rem;
        line-height: 1.125rem;
        border-radius: 0.25rem;
        background-color: #FEEDED;
        position: relative;
        margin-top: .4063rem;

        &-txt {
            z-index: 10;
            position: absolute;
            font-weight: bold;
            font-size: 0.6875rem;
            color: #FFFFFF;
            left: 0.4063rem;
            line-height: 1;
            top: .1875rem;
        }

        img {
            width: 3.4063rem;
            margin: 0;
        }
    }

    .time-limit-left {
        font-weight: bold;
        font-size: .6875rem;
        // position: absolute;
        color: #FFFFFF;
        // left: .375rem;
    }

    .time-limit {
        // position: relative;
        display: flex;
        align-items: center;
        margin-top: .375rem;
        background-color: #FEEDED;
        border-radius: .25rem;
        height: 1rem;
    }

    .time-limit-right {
        // position: absolute;
        // right: .375rem;
        font-weight: 500;
        font-size: .6875rem;
        text-align: right;
        color: #F15353;
    }

    .date {
        font-weight: 400;
        font-size: .75rem;
        color: #6E6E79;
        line-height: 1;
        text-align: left;
        margin-top: .375rem;
    }

    .current-price {
        font-weight: bold;
        font-size: .9375rem;
        color: #F15353;
    }

    .original-price {
        font-weight: 400;
        font-size: .75rem;
        color: #999999;
        text-decoration: line-through;
        margin-left: .5313rem;
    }

    .buy {
        width: 3.25rem;
        height: 1.75rem;
        line-height: 1.75rem;
        text-align: center;
        color: #fff;
        background: var(--themeBaseColor);
        border-radius: 1rem 1rem 1rem 1rem;
        font-weight: 500;
        font-size: .875rem;
    }

    .price {
        display: flex;
        align-items: center;
        line-height: 1;
    }

    .footer {
        display: flex;
        justify-content: space-between;
    }

    .sale {
        font-weight: 400;
        font-size: .75rem;
        color: #999999;
        text-align: right;
        margin-bottom: .5rem;
    }

    .title {
        font-weight: 500;
        font-size: .9375rem;
        color: #00001C;
        text-align: left;
        margin-top: .125rem;
    }

    .goods {
        margin: .625rem .75rem;
        background-color: #fff;
        border-radius: .5rem;
        padding: .625rem;
        display: flex;
    }

    .right {
        margin-left: .375rem;
        flex: 1;
    }

    img {
        margin: 0;
        width: 5rem;
        max-height: 5rem;
        border-radius: .5rem;
    }
}
</style>